<template>

  <p>文章列表总数：{{ articleList.length }}</p>
  <button @click="addArticle">@click添加文章</button>
  <br/>
  <br/>
  <button v-on:click="addArticle">v-on:click添加文章</button>
  <br/>
  <br/>
  <!--  省略-->
  <input type="text" placeholder="按下a键 添加文章" @keydown.a="addArticle"/>
  <br/>
  <br/>
  <input type="text" placeholder="松开a键 添加文章" @keyup.a="addArticle"/>
  <br/>
  <br/>
  <input type="text" placeholder="组合键 ctrl+a键 添加文章" @keyup.ctrl.a="addArticle"/>
  <div v-for="(article,index) in articleList">
    <h1>序号：{{ index + 1 }}</h1>
    <h2>欢迎来到：{{ article.title }}</h2>
    <h4>摘要：{{ article.summary }}</h4>
    <p>作者：{{ article.author }} 阅读量：{{ article.readCt }}</p>
  </div>

</template>

<script setup>

import {onMounted, ref} from "vue";

const articleList = ref([{
      title: "一小时构建Vue知识体系-default",
      summary: "关注方才兄，一小时构建Vue知识体系-default",
      author: "方才",
      readCt: 12
    }
    ]
)

const addArticle = () => {
  articleList.value.push({
    title: "一小时构建Vue知识体系-" + Math.floor(Math.random() * 100),
    summary: "关注方才兄，一小时构建Vue知识体系-3",
    author: "方才3",
    readCt: Math.floor(Math.random() * 100)
  })
}

onMounted(() => {
  console.log("mounted")
  // 在全局监听键盘事件
  window.addEventListener('keydown', handleKeydown);
})
const handleKeydown = (event) => {
  if (event.key === 'a' && event.ctrlKey) {
    event.preventDefault(); // 阻止默认行为，例如浏览器的快捷键
    addArticle();
  }
}

</script>


<style scoped>

</style>